<template>
  <menu-tree ref="starMenu" class="star-menu" :menu="navList" :sync-active="false" :collapsed="collapsed" />
</template>

<script>
/**
 * @Author: 焦质晔
 * @Date: 2019-06-20 10:00:00
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2019-11-26 09:45:09
 **/
import { mapState, mapActions } from 'vuex';
import MenuTree from './menuTree';

export default {
  name: 'StarMenu',
  components: {
    MenuTree
  },
  props: {
    collapsed: {
      type: Boolean,
      default: false
    }
  },
  data() {
    this.starMenuRef = null;
    return {};
  },
  computed: {
    ...mapState('app', ['starMenuList', 'commonMenuList']),

    navList() {
      if(this.starMenuList.length > 0){
        return [
          /*20131109去掉常用导航 {
            title: '常用导航',
            key: '/common',
            icon: 'el-icon-s-order',
            children: this.commonMenuList
          }, */
          {
            title: '我的收藏',
            key: '/star',
            icon: 'el-icon-star-on',
            children: this.starMenuList
          }
        ];
      }else{
        return []
      }

    },
    allMenuList() {
      const keys = [...this.starMenuList, ...this.commonMenuList].map(x => x.key);
      return [...new Set(keys)];
    }
  },
  watch: {
    $route({ path }) {
      this.starMenuRef.activeIndex = path;
      if (!this.allMenuList.includes(path)) {
        this.starMenuRef.activeIndex = '';
      }
    }
  },
  mounted() {
    this.starMenuRef = this.$refs.starMenu.$children[0];
  }
};
</script>
